<template>
  <up-navbar
    :title="title"
    :auto-back="false"
    placeholder
    :bg-color="bgColor"
    :left-icon="cLeftIcon"
    :left-icon-color="leftIconColor"
    :title-style="titleStyle"
    :height="height"
    @left-click="back"
  />
</template>

<script setup lang="ts">
import { usePageRouter } from '@/hooks';

interface CustomNavbarProps {
  title: string;
  autoBack?: boolean;
  leftIcon?: string;
  leftIconColor?: string;
  titleStyle?: string | Partial<CSSStyleDeclaration>;
  bgColor?: string;
  height?: {
    type: string;
    default: '44';
  };
}

const props = withDefaults(defineProps<CustomNavbarProps>(), {
  title: '加载中...',
  autoBack: false,
  leftIcon: '',
});

const pageRouter = usePageRouter();

const back = () => pageRouter.back();

const tabbarList = [
  '/pages/tab/home/index',
  '/pages/tab/list/index',
  '/pages/tab/message/index',
  '/pages/tab/user/index',
];

const cLeftIcon = computed(() => {
  if (props.leftIcon) {
    return props.leftIcon;
  }
  if (tabbarList.includes(uni.$u.page())) {
    return '';
  }
  return 'arrow-left';
});
</script>

<style scoped lang="scss"></style>
